<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue初体验</title>
  <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
  <!--  ■{{属性名}} 作为值替换，会被传入vue对象中的属性值替换掉，该属性定义在传入对象的data属性中，
      与花括号中的属性名称一致，解析的时候就会从data中找出相同名称的属性，把该属性的值用来替换{{属性名}}-->
  {{message}}

  <ul>
    <!--  ■v-for是vue标签中指定for循环的标签，标签对应的值的也就是类似python中for循环或者java中foreach的写法-->
    <li v-for="item in lists">{{item}}</li>
  </ul>


  <span>当前计数：{{counter}}</span>

  <!--  ■vue事件，以v-on:开头，指定不同的事件，事件的属性值可以是方法，也可以是代码片段-->
  <button v-on:click="counter++">+</button>
  <button v-on:click="counter--">-</button>
  <button v-on:click="add">+2</button>
  <button v-on:click="sub">-2</button>

  <!--  ■@是语法糖的一种写法，等价于v-on:,为了简写方便，用以替换v-on:-->
  <button @click="counter++">@+</button>
  <button @click="counter--">@-</button>
</div>
<script>
  // let（变量）/const（常量）
  // 编程范式，声明式编程
  const app = new Vue({
    el: '#app', // 用于挂载要管理的元素，类似于jquery中$("#"),找到要操作的DOM节点
    data: { // 定义的数据，这些定义的数据，只在el 挂在的元素标签的内部才能使用解析
      message: "你你好啊，兄弟",
      lists: ['星际', '盗梦', '少年'],
      counter: 0
    },
    methods: { // 定义的方法，这些定义的方法也是只有在el 挂在的元素标签的内部才能使用解析
      add: function () {
        console.log("add被执行")
        this.counter += 2;
      },
      sub: function () {
        console.log("sub被执行")
        this.counter -= 2;
      }
    }
  })

</script>
</body>
</html>